import {View} from '@tarojs/components'

const DeviceCount: React.FC<{
  count?: number
  changeDevListShowType?: HomeStore.ChangeDevListShowType
}> = ({count, changeDevListShowType}): JSX.Element => {
  if (count === undefined) {
    return (
      <View
        className="w-201 h-19 mx-auto mt-10 flex rounded-2"
        style={{
          backgroundColor: '#59abff'
        }}
      ></View>
    )
  } else {
    return (
      <View className="w-201 h-19 mx-auto mt-10 flex">
        {/* 设备数量展示 */}
        <View className="w-113 h-19 leading-19 text-12 font-light overflow-hidden flex hanzi">
          <View className="h-19 text-white">当前设备</View>
          <View className="h-19 leading-16 text-16 font-bold mx-6 text-white notHanzi">
            {count || 0}
          </View>
          <View className="h-19 text-white">台</View>
        </View>

        {/* 前往设备列表页 */}
        <View
          className="w-88 h-19 flex justify-center items-center"
          onClick={() =>
            changeDevListShowType && changeDevListShowType('simpleList')
          }
        >
          <View className="w-72 h-19 leading-19 text-12 text-white text-right font-medium hanzi">
            简略设备列表
          </View>
          <View className="w-16 h-16 grid grid-cols-1 place-content-center">
            <View className="triangle mx-auto"></View>
          </View>
        </View>
      </View>
    )
  }
}

export default DeviceCount
